<template>
  <main>
    <!-- <router-link to="/index" class="btn back animated"><i class="fa fa-undo"></i> 返回</router-link> -->
    <div class="plane">
      <form action="">
        <div class="form-box">
          <div class="line">
            <label for="name"><i class="fa fa-user"></i></label>
            <input id="name" type="text" placeholder="您的姓名" />
          </div>
          <div class="line">
            <label for="email"><i class="fa fa-envelope"></i></label>
            <input id="email" type="email" placeholder="您的邮箱" />
          </div>
          <div class="line">
            <label for="phone"><i class="fa fa-phone"></i></label>
            <input id="phone" type="text" placeholder="您的联系方式" />
          </div>
          <div class="line">
            <label for="date"><i class="fa fa-calendar"></i></label>
            <input
              class="show_placeholder"
              id="date"
              placeholder="选择您预定餐厅日期"
            />
          </div>
          <div class="line">
            <label for="date"><i class="fa fa-clock-o"></i></label>
            <select name="time">
              <!-- 此项用于placeholder -->
              <option value="" disabled="disabled" selected="selected">
                选择您预定的场次
              </option>
              <option value="0">中午</option>
              <option value="1">下午</option>
              <option value="2">晚上</option>
              <option value="3">夜场</option>
            </select>
          </div>
          <div class="line">
            <label for="date"><i class="fa fa-location-arrow"></i></label>
            <select name="location">
              <!-- 此项用于placeholder -->
              <option value="" disabled="disabled" selected="selected">
                选择宴席类型
              </option>
              <option value="0">大堂</option>
              <option value="1">露天场</option>
              <option value="2">小包厢</option>
              <option value="3">特等席</option>
            </select>
          </div>
        </div>
        <textarea placeholder="其他备注内容"></textarea>
        <button class="btn animated" type="submit">确认预定</button>
      </form>
    </div>
  </main>
</template>

<script>
export default {
  name: "Booking",
};
</script>

<style lang="less" scoped>
/* 按钮样式工具类 */
.btn {
  display: block;
  width: 100px;
  color: #fff;
  line-height: 40px;
  border-radius: 22px;
  font-size: 18px;
  background-color: #1b1b1b;
  cursor: pointer;
}
/* 以上是按钮样式工具类 */

main {
  display: block;
  background: url(../../assets/img/booking/booking-bg.jpg) no-repeat center
    center / cover;
  height: 100vh;

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.5);
  }

  .plane {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* background-color: #1b1b1b; */
    background-color: rgba(27, 27, 27, 0.5);
    clip-path: polygon(0% 0%, 100% 10%, 100% 85%, 0% 100%);
    display: flex;
    justify-content: center;
    align-items: center;

    form {
      position: relative;
      width: 500px;
      padding: 90px 36px 30px;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 20px;

      &::before {
        content: "";
        display: block;
        height: 80px;
        background-color: #1b1b1b;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        border-radius: 20px 20px 0 0;
      }

      .form-box {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 5px;
        margin-bottom: 5px;

        .line {
          position: relative;

          label {
            display: inline-block;
            width: 100px;
            text-align: right;
            line-height: 38px;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            text-align: center;
            position: absolute;
            left: 3.5px;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: #1b1b1b;
            color: #fff;
          }
          input,
          select {
            width: 100%;
            line-height: 40px;
            border-radius: 22px;
            padding: 0 5px 0 42px;
            box-sizing: border-box;
            font-size: 20px;
            color: #1b1b1b;
          }
          select {
            height: 44px;
          }
        }
      }
      textarea {
        width: 100%;
        min-height: 10em;
        border-radius: 15px;
        box-sizing: border-box;
        padding: 0.5em 1em;
        resize: none;
        color: #1b1b1b;
      }
      button.btn {
        border: none;
        margin: 5px auto 0;
        width: 120px;
      }
    }
  }
}
/* main .back {
  position: absolute;
  z-index: 2;
  text-align: center;
  text-decoration: none;
  right: 50px;
  top: 30px;
} */
</style>